<template>
    <div class="app">
        <Header/>
        <div class="back">
            <div class="con">
              <div class="pxes"></div>
              <div class="listneo">
                <coreL/>
                <div class="conres">
                  <div class="ra">我的订单</div>
                  <el-tabs v-model="activeName" @tab-click="handleClick">


                    <el-tab-pane label="全部订单 " name="first">
                      <div class="conem">
                        <div class="list">
                          <div class="top flex_lr">
                            <div>订单号：915426218542320</div>
                            <div>订单确认时间：2019-11-27</div>
                          </div>
                          <div class="con_u">
                            <div class="toen1">
                              <div class="topeng">
                                <div class="img_qw"><img src="@/assets/img/aa.png" alt=""></div>
                                <div class="w250">
                                  <h4>简柏格真皮百搭款女包</h4>
                                  <div class="xpsgf">新品预定</div>
                                  <p>颜色：黑色 尺码：中号</p>
                                  <p>发货时间：三天内</p>
                                </div>
                              </div>
                              <div class="dianjia"><img src="@/assets/img/收货橘.png" alt=""> 简柏格</div>
                            </div>
                            <div class="toen2">
                              <div>首发价格</div>
                              <div>￥380 </div>
                            </div>
                            <div class="toen3">
                              <div>预定金</div>
                              <p>2019-11-25~2019-12-01</p>
                              <div class="ww">￥50</div>
                              <p class="eee_50">50元抵扣80元</p>
                              <p>取消订单预定金不退</p>
                            </div>
                            <div class="toen4">
                              <div>尾款 </div>
                              <p>2019-12-02~2019-12-05</p>
                              <div class="ww">￥300</div>
                              <div class="baen adadadada">确认收货</div>
                              <div class="ww_ww aewgeggwwe">超时末支付订单自动关闭</div>
                            </div>
                            <div class="toen5">
                              <div>订单状态</div>
                              <p class="eee_20">待付款</p>

                            </div>
                          </div>
                          <div class="fom">
                            <div>联系卖家</div>
                            <div>投诉卖家</div>
                            <div>取消订单</div>
                          </div>
                        </div>
                      </div>
                    </el-tab-pane>



                    <el-tab-pane label="待付款" name="second">
                      <div class="conem">
                        <div class="list" v-for="(list,index) in inuser" :key="index" :id='list.id'>
                          <div class="top flex_lr">
                            <div>订单号：{{list.orderSn?(list.orderSn):("无")}}</div>
                            <div>订单确认时间：{{list.paymentTime?(list.paymentTime):("无")}}</div>
                          </div>
                          <div class="con_u">
                            <div class="toen1">
                              <div class="topeng">
                                <div class="img_qw"><img :src="list.goodsPicture" alt=""></div>
                                <div class="w250">
                                  <h4>{{list.goodsName}}</h4>
                                  <div class="xpsgf">
                                    {{list.activityType==0?('免费体验'):
                                      list.activityType==1?('区间竞猜'):
                                      list.activityType==2?('新品首发'):('无')}}
                                  </div>
                                  <p>颜色：黑色 尺码：中号</p>
                                  <p>发货时间：三天内</p>
                                </div>
                              </div>
                              <div class="dianjia"><img src="@/assets/img/收货橘.png" alt=""> {{list.businessName}}</div>
                            </div>
                            <div class="toen2">
                              <div>首发价格</div>
                              <div>￥{{list.totalAmount?(list.totalAmount):("0")}} </div>
                            </div>
                            <div class="toen3">
                              <div>预定金</div>
                              <p>2019-11-25~2019-12-01</p>
                              <div class="ww">￥{{list.depositAmount?(list.depositAmount):("0")}}</div>
                              <p class="eee_50">50元抵扣80元</p>
                              <p>取消订单预定金不退</p>
                            </div>
                            <div class="toen4">
                              <div>尾款 </div>
                              <p>2019-12-02~2019-12-05</p>
                              <div class="ww">￥{{list.balanceAmount?(list.balanceAmount):("0")}}</div>
                              <div class="baen adadadada">立即支付</div>
                              <div class="ww_ww aewgeggwwe">超时末支付订单自动关闭</div>
                            </div>
                            <div class="toen5">
                              <div>订单状态</div>
                              <p class="eee_20">{{
                                list.status==0?('待付款'):
                                list.status==1?('待发货'):
                                list.status==2?('已发货'):
                                list.status==3?('已完成'):
                                list.status==4?('已关闭'):
                                list.status==5?('无效订单'):
                                list.status==6?('已评价'):
                                list.status==7?('未评价'):('无状态')
                                }}</p>

                            </div>
                          </div>
                          <div class="fom">
                            <div>联系卖家</div>
                            <div @click="dialogFormVisible = true">投诉卖家</div>
                            <div @click="onopen(list.id)">取消订单</div>
                          </div>
                        </div>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="待发货" name="third">
                      <div class="conem">
                        <div class="list">
                          <div class="top flex_lr">
                            <div>订单号：915426218542320</div>
                            <div>订单确认时间：2019-11-27</div>
                          </div>
                          <div class="con_u">
                            <div class="toen1">
                              <div class="topeng">
                                <div class="img_qw"><img src="@/assets/img/aa.png" alt=""></div>
                                <div class="w250">
                                  <h4>简柏格真皮百搭款女包</h4>
                                  <div class="xpsgf">新品预定</div>
                                  <p>颜色：黑色 尺码：中号</p>
                                  <p>发货时间：三天内</p>
                                </div>
                              </div>
                              <div class="dianjia"><img src="@/assets/img/收货橘.png" alt=""> 简柏格</div>
                            </div>
                            <div class="toen2">
                              <div>首发价格</div>
                              <div>￥380 </div>
                            </div>
                            <div class="toen3">
                              <div>预定金</div>
                              <p>2019-11-25~2019-12-01</p>
                              <div class="ww">￥50</div>
                              <p class="eee_50">50元抵扣80元</p>
                              <p>取消订单预定金不退</p>
                            </div>
                            <div class="toen4">
                              <div>尾款 </div>
                              <p>2019-12-02~2019-12-05</p>
                              <div class="ww">￥300</div>
                              <div class="ww_ww">退货/退款仅退尾款  </div>
                            </div>
                            <div class="toen5">
                              <div>订单状态</div>
                              <p class="eee_20">等待商家发货</p>

                              <div class="baen">提醒发货</div>
                            </div>
                          </div>
                          <div class="fom">
                            <div @click="$router.push('/ltuik')">退货/退款</div>
                            <div>联系卖家</div>
                            <div>投诉卖家</div>
                            <!-- <div>取消订单</div> -->
                          </div>
                        </div>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label=" 待收货" name="fourth">
                      <div class="conem">
                        <div class="list">
                          <div class="top flex_lr">
                            <div>订单号：915426218542320</div>
                            <div>订单确认时间：2019-11-27</div>
                          </div>
                          <div class="con_u">
                            <div class="toen1">
                              <div class="topeng">
                                <div class="img_qw"><img src="@/assets/img/aa.png" alt=""></div>
                                <div class="w250">
                                  <h4>简柏格真皮百搭款女包</h4>
                                  <div class="xpsgf">新品预定</div>
                                  <p>颜色：黑色 尺码：中号</p>
                                  <p>发货时间：三天内</p>
                                </div>
                              </div>
                              <div class="dianjia"><img src="@/assets/img/收货橘.png" alt=""> 简柏格</div>
                            </div>
                            <div class="toen2">
                              <div>首发价格</div>
                              <div>￥380 </div>
                            </div>
                            <div class="toen3">
                              <div>预定金</div>
                              <p>2019-11-25~2019-12-01</p>
                              <div class="ww">￥50</div>
                              <p class="eee_50">50元抵扣80元</p>
                              <p>取消订单预定金不退</p>
                            </div>
                            <div class="toen4">
                              <div>尾款 </div>
                              <p>2019-12-02~2019-12-05</p>
                              <div class="ww">￥300</div>
                              <div class="ww_ww">退货/退款仅退尾款  </div>
                            </div>
                            <div class="toen5">
                              <div>订单状态</div>
                              <p class="eee_20">已发货</p>
                              <div class="baen">物流信息</div>
                              <div class="baen">确认收货</div>
                            </div>
                          </div>
                          <div class="fom">
                            <div>退货/退款</div>
                            <div>联系卖家</div>
                            <div>投诉卖家</div>
                          </div>
                        </div>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="待评价" name="daipin">
                      <div class="conem">
                        <div class="list">
                          <div class="top flex_lr">
                            <div>订单号：915426218542320</div>
                            <div>订单确认时间：2019-11-27</div>
                          </div>
                          <div class="con_u">
                            <div class="toen1">
                              <div class="topeng">
                                <div class="img_qw"><img src="@/assets/img/aa.png" alt=""></div>
                                <div class="w250">
                                  <h4>简柏格真皮百搭款女包</h4>
                                  <div class="xpsgf">新品预定</div>
                                  <p>颜色：黑色 尺码：中号</p>
                                  <p>发货时间：三天内</p>
                                </div>
                              </div>
                              <div class="dianjia"><img src="@/assets/img/收货橘.png" alt=""> 简柏格</div>
                            </div>
                            <div class="toen2">
                              <div>首发价格</div>
                              <div>￥380 </div>
                            </div>
                            <div class="toen3">
                              <div>预定金</div>
                              <p>2019-11-25~2019-12-01</p>
                              <div class="ww">￥50</div>
                              <p class="eee_50">50元抵扣80元</p>
                              <p>取消订单预定金不退</p>
                            </div>
                            <div class="toen4">
                              <div>尾款 </div>
                              <p>2019-12-02~2019-12-05</p>
                              <div class="ww">￥300</div>
                              <div class="ww_ww">退货/退款仅退尾款  </div>
                            </div>
                            <div class="toen5">
                              <div>订单状态</div>
                              <p class="eee_20">已确认收货</p>
                              <div class="baen">评价</div>

                            </div>
                          </div>
                          <div class="fom">
                            <div>退货/退款</div>
                            <div>联系卖家</div>
                            <div>投诉卖家</div>
                          </div>
                        </div>
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                  <el-dialog title="投诉举报" :visible.sync="dialogFormVisible">
                    <el-form :model="form">
                      <el-form-item label="投诉" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                      </el-form-item>
                      <el-form-item label="举报" :label-width="formLabelWidth">
                        <el-select v-model="form.region" placeholder="请选择举报内容">
                          <el-option label="假货" value="shanghai"></el-option>
                          <el-option label="有害" value="beijing"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="活动形式" :label-width="formLabelWidth">
                        <el-input type="textarea" v-model="form.desc"></el-input>
                      </el-form-item>
                      <el-form-item label="上传图片" :label-width="formLabelWidth">
                        <el-upload
                          action="#"
                          list-type="picture-card"
                          :limit=5
                          :auto-upload="false">
                            <i slot="default" class="el-icon-plus"></i>
                            <div slot="file" slot-scope="{file}">
                              <img
                                class="el-upload-list__item-thumbnail"
                                :src="file.url" alt=""
                              >
                              <span class="el-upload-list__item-actions">
                                <span
                                  class="el-upload-list__item-preview"
                                  @click="handlePictureCardPreview(file)"
                                >
                                  <i class="el-icon-zoom-in"></i>
                                </span>
                                <span
                                  v-if="!disabled"
                                  class="el-upload-list__item-delete"
                                  @click="handleDownload(file)"
                                >
                                  <i class="el-icon-download"></i>
                                </span>
                                <span
                                  v-if="!disabled"
                                  class="el-upload-list__item-delete"
                                  @click="handleRemove(file)"
                                >
                                  <i class="el-icon-delete"></i>
                                </span>
                              </span>
                            </div>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                          <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                      </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">

                      <el-button type="danger" @click="dialogFormVisible = false">提交</el-button>
                    </div>
                  </el-dialog>
                </div>
              </div>
              <coreF/>
            </div>
        </div>
        <Footer/>
    </div>
</template>
<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import coreL from '@/components/coreL'
import coreF from '@/components/coreF'
import axios from 'axios'
export default {
    components: {
    Header,
    Footer,
    coreL,
    coreF
    },
    data() {
      return {
       activeName: 'first',
       inuser:[],
       dialogFormVisible:false,
       formLabelWidth: '120px',
       form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false
      }

    },
    mounted() {
      if(this.$route.query.id==1){
        this.activeName='second'
      }else if(this.$route.query.id==2){
        this.activeName='third'
      }else if(this.$route.query.id==3){
        this.activeName='fourth'
      }else if(this.$route.query.id==4){
        this.activeName='daipin'
      }else if(this.$route.query.id==5){
        this.activeName='first'
      }
      this.onSubmit()
    },
    methods: {
      async onSubmit() {
          
      },
    //取消订单
      onopen(e) {
        this.$confirm('此操作将取消订单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '确定!',
          });
          console.log(e)
          axios.get(`http://47.105.66.232:8066/base/umsOrder/cancelOrder?orderSn=${e}`)
          .then(res=>{
            console.log(res)
            this.onSubmit()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消!'
          });
        });
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
       handleRemove(file) {
        console.log(file);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log(file);
      }
    },
}
</script>
<style scoped>
.app  /deep/  .ist_l .ist_c li:nth-child(2) {
    background-color: #ff9381;
    width: 126px;
    height: 50px;
    display: block;
}
.conres /deep/  .el-tabs__nav {margin-left: 260px}
.conres /deep/ .el-tabs__item.is-active {color: #f06048;}
.conres /deep/ .el-tabs__active-bar {color: #f06048;}
.conres /deep/ .el-tabs__item:hover {color: #f06048;}
.conres /deep/ .el-tabs__active-bar {background-color:#f06048 }
.flex_lr {
  display: flex;
  justify-content: space-between;
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.back {
    background-color: #f06048
}
.pxes {
  height: 15px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee
}
.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.conres {
  width: 930px;
  border-radius: 6px;
  background-color: #fff
}
.conres .ra {
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 43px;
  margin-left: 14px;
  position: relative;
  top: 15px;
  width: 192px;
	height: 43px;
	background-color: #f06048;
	box-shadow: 0px 4px 2px 0px
		rgba(70, 23, 15, 0.38);
	border-radius: 0px 0px 20px 20px;
}
.conem {
  width: 890px;
  margin: 0 auto;
}
 .list {
  width: 888px;
	height: 235px;
  border: 1px solid #dcdcdc;
  margin-bottom: 15px;
}
 .list .top {
  height: 30px;
  border-bottom: 1px solid #dcdcdc;
  text-align: center;
  line-height: 30px;
}
 .list .top div:nth-child(1) {
  padding-left: 15px;
}
 .list .top div:nth-child(2) {
  padding-right: 15px;
  color: #a0a0a0
}
 .list .con_u {
  height: 160px;
  border-bottom: 1px solid #dcdcdc;
}
.list .fom {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.list .fom div:hover {
  color: #fff;
  background-color: #f06048;
  cursor: pointer;
}
.list .fom div {
  width: 95px;
	height: 26px;
  line-height: 26px;
  text-align: center;
	border-radius: 13px;
	border: solid 1px #f06048;
  margin-right: 15px;
  margin-top: 7px;
  font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 24px;
	letter-spacing: 0px;
	color: #f06048;
}
.con_u {
  display: flex
}
.con_u .toen1 {
  width: 400px;
  border-right: 1px solid #dcdcdc;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.topeng .img_qw img{
	width: 120px;
	height: 120px;
}
.topeng {
  display: flex;
  justify-content: space-between;
  margin: 10px 8px 0px 16px;
}
.topeng .w250 {
  width: 246px;
  line-height: 27px;
}
.topeng .w250 h4 {
  font-size: 18px
}
.topeng .w250  .xpsgf{
  width: 64px;
	height: 19px;
	background-color: #e44d5e;
	border-radius: 9px;
  color: #fff;
  line-height: 19px;
  text-align: center;
}
.con_u .dianjia{
  font-size: 18px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 24px;
	letter-spacing: 0px;
	color: #313131;
  padding-left: 28px;
}
.con_u .dianjia img{
	width: 22px;
	height: 20px;
  position: relative;
  top: 3px;
}
.con_u .toen2 {
  width: 106px;
  border-right: 1px solid #dcdcdc;
  text-align: center;
}
.con_u .toen2 div:nth-child(1){
  font-size: 14px;
  margin-top: 20px;
}
.con_u .toen3 div:nth-child(1){
  font-size: 14px;
  margin-top: 20px;
}
.con_u .toen4 div:nth-child(1){
  font-size: 14px;
  margin-top: 20px;
}
.con_u .toen5 div:nth-child(1){
  font-size: 14px;
  margin-top: 20px;
}
.con_u .toen2 div:nth-child(2){
	font-size: 20px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 24px;
	letter-spacing: 0px;
	color: #313131;
  margin-top: 40px;
}
.con_u .toen3 {
  width: 143px;
  border-right: 1px solid #dcdcdc;
  text-align: center;
}
.con_u .toen3 .ww{
	font-size: 20px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 24px;
	letter-spacing: 0px;
	color: #f06048;
  margin-top: 20px;
}
.con_u .toen4 .ww{
	font-size: 20px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 24px;
	letter-spacing: 0px;
	color: #f06048;
  margin-top: 20px;
}
.con_u p {
  font-size: 12px;
}
.con_u .toen4 {
  width: 143px;
  border-right: 1px solid #dcdcdc;
  text-align: center;
}

.con_u .toen5 {
  width: 90px;
  text-align: center;
}
.baen {
  width: 80px;
	height: 20px;
	background-color: #f06048;
  color: #fff;
  text-align: center;
  line-height: 20px;
  margin-top: 15px;
  margin-left: 3px;
}
.eee_50 {
  width: 80px;
	height: 20px;
	border: solid 1px #a0a0a0;
  display: block;
  margin: 5px auto;
}
.eee_20 {
  margin-top: 20px;
  margin-bottom: 10px;
}
.ww_ww {
  color: #959595;
  font-size: 12px;
  margin-top: 32px;
}
.toen4 .adadadada {    margin-top: 7px;
    margin-left: 38px;}
.toen4 .aewgeggwwe {    margin-top: 6px;}
</style>
